<mat-card [ixUiSearch]="searchableElements.elements.localization">
  <mat-toolbar-row>
    <h3>{{ helptext.localeTitle | translate }}</h3>
    <div *ixWithLoadingState="generalConfig$ as generalConfig" class="actions action-icon">
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        color="default"
        [ixTest]="['localization', 'settings']"
        [ixUiSearch]="searchableElements.elements.settings"
        (click)="openSettings(generalConfig)"
      >
        {{ 'Settings' | translate }}
      </button>
    </div>
  </mat-toolbar-row>

  <mat-card-content>
    <mat-list>
      <mat-list-item [ixUiSearch]="searchableElements.elements.language">
        <span class="label">{{ helptext.language.label | translate }}:</span>
        <span *ixWithLoadingState="generalConfig$ as generalConfig" class="value">
          <ng-container *ixWithLoadingState="currentLanguage$ as currentLanguage">
            {{ currentLanguage | mapValue: languages }}
          </ng-container>
        </span>
      </mat-list-item>
      <mat-list-item [ixUiSearch]="searchableElements.elements.dateFormat">
        <span class="label">{{ helptext.dateFormat.label | translate }}:</span>
        <span *ixWithLoadingState="generalConfig$ as generalConfig" class="value">
          {{ localeService.getDateAndTime(generalConfig.timezone)[0] }}
        </span>
      </mat-list-item>
      <mat-list-item [ixUiSearch]="searchableElements.elements.timeFormat">
        <span class="label">{{ helptext.timeFormat.label | translate }}:</span>
        <span *ixWithLoadingState="generalConfig$ as generalConfig" class="value">
          {{ localeService.getDateAndTime(generalConfig.timezone)[1] }}
        </span>
      </mat-list-item>
      <mat-list-item [ixUiSearch]="searchableElements.elements.timezone">
        <span class="label">{{ helptext.timezone.label | translate }}:</span>
        <span *ixWithLoadingState="generalConfig$ as generalConfig" class="value">
          {{ generalConfig.timezone }}
        </span>
      </mat-list-item>
      <mat-list-item [ixUiSearch]="searchableElements.elements.consoleKeyboardMap">
        <span class="label">{{ helptext.kbdmap.label | translate }}:</span>
        <span *ixWithLoadingState="generalConfig$ as generalConfig" class="value">
          <ng-container *ixWithLoadingState="mapChoices$ as mapChoices">
            {{ getKeyboardMapValue(mapChoices, generalConfig) }}
          </ng-container>
        </span>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>
